<template>
  <button type="button" @click="change(1)">Demo1</button>
  <button type="button" @click="change(2)">Demo2</button>
  <textarea v-model="codeOfMer" />
   <button type="button" @click="rePaintMer">确定</button>
  <hi-mermaid :nodes="data" @node-click="nodeClick" />
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { EdgeType, IMermaidNode } from "./types";

const data1 = [
  {
    id: "1",
    text: "A",
    link: "---",
    next: ["2"],
    editable: true,
  } as IMermaidNode,
  {
    id: "2",
    text: "B",
    edgeType: EdgeType.circle,
    editable: true,
    next: ["3"],
  } as IMermaidNode,
  { id: "3", text: "C", next: ["4", "6"] } as IMermaidNode,
  {
    id: "4",
    text: "D",
    link: "-- This is the text ---",
    next: ["5"],
  } as IMermaidNode,
  { id: "5", text: "E" } as IMermaidNode,
  { id: "6", text: "F" } as IMermaidNode,
];
const data2 = [
  {
    id: "1",
    text: "AA",
    link: "---",
    next: ["2"],
    editable: true,
  } as IMermaidNode,

  {
    id: "2",
    text: "BB",
    edgeType: EdgeType.circle,
    next: ["3"],
  } as IMermaidNode,

  { id: "3", text: "CC", next: ["4", "6"] },
  {
    id: "4",
    text: "DD",
    link: "-- This is the text ---",
    next: ["5"],
  } as IMermaidNode,

  { id: "5", text: "EE" } as IMermaidNode,

  { id: "6", text: "FF" } as IMermaidNode,
];
export default defineComponent({
  name: "App",
  setup() {
    var a: any = null;
    let data = ref(a);
    data.value = data1;
    const codeOfMer = ref(null)

    const change = (t: number) => {
      if (t == 1) {
        data.value = data1;
      } else if (t == 2) {
        data.value = data2;
      }
    };
    const nodeClick = (id: any) => {
      alert(id);
    };

    function rePaintMer(){
      data.value = codeOfMer.value
    }

    return { data, change, codeOfMer ,nodeClick, rePaintMer };
  },
});
</script>

<style scope>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>